

<template>
  <div>
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <el-menu-item index="1" >menu1
        </el-menu-item>
        <el-menu-item index="UseRequestWithRetry" >useRequestWithRetry
        </el-menu-item>
      </el-menu>

      <div >
        <component :is="AsyncComponent" />
      </div>
  </div>
</template>


<script setup lang="ts">

import { ref, defineAsyncComponent } from 'vue';
const activeIndex = ref('UseRequestWithRetry')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  activeIndex.value = key
}

const AsyncComponent = defineAsyncComponent(() =>
  import(`./${activeIndex.value}.vue`)
);
</script>